import {initMixin} from './init'
import { initLifeCycle } from './lifecycle'
import Watcher, { nextTick } from './observe/watcher'
import { initGlobalAPI } from "./gloablAPI";
import { initStateMixin } from './state';
import { compileToFunction } from './compiler';
import { createElm, patchProps,patch } from "./vdom/patch";
//将所有数据耦合在一起
function Vue(options){ // options就是用户的选项
    this._init(options)

}
// Vue.prototype.$nextTick = nextTick
initMixin(Vue) // 扩展了init方法
initLifeCycle(Vue) // vm_update  vm._render
initGlobalAPI(Vue) // 全局api的实现
initStateMixin(Vue) // 实现了nextTick $watch


// // 最终调用的都是这个方法
// Vue.prototype.$watch = function (exprOrFn, cb) {
//     // firstname
//     // ()=>vm.firstname

//     // firstname的值变化了 直接执行cb函数即可
//     new Watcher(this,exprOrFn,{user:true},cb)
// }


// ------------- 为了方便观察前后的虚拟节点-- 测试的-----------------

let render1 = compileToFunction(`<ul  a="1" style="color:blue">
  <li> {{name}}</li>
  <li> a</li>
</ul>`);
let vm1 = new Vue({ data: { name: 'zf' } })
let prevVnode = render1.call(vm1)
console.log(prevVnode,'prevVnode')
let el = createElm(prevVnode);
document.body.appendChild(el)



let render2 = compileToFunction(`<ul  a="1"  style="color:red;">
    
<li> {{name}}</li>
<li> b</li>
</ul>`);
let vm2 = new Vue({ data: { name: 'zf' } })
let nextVnode = render2.call(vm2);


// // 直接将新的节点替换掉了老的，  不是直接替换 而是比较两个人的区别之后在替换.  diff算法
// // diff算法是一个平级比较的过程 父亲和父亲比对， 儿子和儿子比对 

setTimeout(() => {
    patch(prevVnode, nextVnode)


    // let newEl = createElm(nextVnode); 
    // el.parentNode.replaceChild(newEl,el) // 全局替换
}, 1000)


export default Vue